<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useWorkStore } from '@/stores/work'
import TodoList from '@/components/works/TodoList.vue'
import SnakeGame from '@/components/works/SnakeGame.vue'
import TetrisGame from '@/components/works/TetrisGame.vue'
import SearchGithubuser from '@/components/works/SearchGithubuser.vue'

const workStore = useWorkStore()
const route = useRoute()
const router = useRouter()
const workId = parseInt(route.params.id)

//  根据ID获取当前作品
const currentWork = workStore.getWorkById(workId) || {
  title: '作品不存在',
  fullDescription: '抱歉，您请求的作品不存在。',
}

// 根据路由参数id动态选择要显示的组件
const currentWorkComponent = computed(() => {
  switch (workId) {
    case 1:
      return TodoList
    case 2:
      return SnakeGame
    case 3:
      return TetrisGame
    case 4:
      return SearchGithubuser
    default:
      return null
  }
})

// 滚动动画逻辑
onMounted(() => {
  checkVisibility()
  window.addEventListener('scroll', checkVisibility)
})

onUnmounted(() => {
  window.removeEventListener('scroll', checkVisibility)
})

function checkVisibility() {
  const elements = document.querySelectorAll('.animate-on-scroll')
  elements.forEach(element => {
    const rect = element.getBoundingClientRect()
    const windowHeight = window.innerHeight || document.documentElement.clientHeight

    if (rect.top <= windowHeight * 0.85) {
      element.classList.add('visible')
    }
  })
}

// 返回作品列表
const goBack = () => {
  router.push('/works')
}
</script>

<template>
  <div class="work-detail-container">
    <main class="work-detail-content">
      <button
        class="back-button"
        @click="goBack"
      >
        <el-icon>
          <i-ep-ArrowLeft />
        </el-icon>
        返回作品列表
      </button>

      <!-- 头部：作品标题 -->
      <h1 class="work-detail-title gradient-text animate-on-scroll">
        {{ currentWork.title }}
      </h1>

      <!-- 主体部分：使用动态组件展示具体作品 -->
      <div class="work-detail-main animate-on-scroll">
        <component :is="currentWorkComponent" />
      </div>

      <!-- 下方：项目详细描述 -->
      <div class="work-detail-description animate-on-scroll">
        <h2>项目描述</h2>
        <pre>{{ currentWork.fullDescription }}</pre>
      </div>

      <!-- 页脚装饰 -->
      <div class="footer-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-dot"></div>
        <div class="decoration-line"></div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.work-detail-container {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
  padding-top: 80px;
}

.work-detail-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: var(--primary-color);
  color: white;
}

.work-detail-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(20px);
}

.work-detail-main {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(20px);
}

.work-detail-description h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.work-detail-description pre {
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.8;
  color: var(--text-color);
}

/* 渐变文字效果 */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color), #67a8f2, #59a6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: gradient-shift 6s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 页脚装饰 */
.footer-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  padding-bottom: 3rem;
  opacity: 0;
  animation: fadeIn 1s ease 1s forwards;
}

.decoration-line {
  height: 1px;
  width: 40px;
  background-color: var(--border-color);
}

.decoration-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-color);
  margin: 0 8px;
}

/* 动画效果 */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .work-detail-title {
    font-size: 2rem;
  }

  .implementation-content {
    padding: 1rem;
  }

  .screenshots-grid {
    grid-template-columns: 1fr;
  }
}
</style>
